<template>
  <uni-popup
    ref="income"
    class="gain-container"
    :is-mask-click="false"
    @touchmove.stop.prevent
  >
    <div class="gain-content">
      <div class="gain-content-bg">
        <image
          class="star-light"
          src="https://ustatic.hudongmiao.com/%20miao/index/star-bg.png"
        ></image>
        <image
          class="light-bg"
          src="https://ustatic.hudongmiao.com/%20miao/index/bg-light.png"
        ></image>
        <image class="hb-bg" src="https://ustatic.hudongmiao.com/%20miao/index/hb-bg.png"></image>
        <div class="hb-content">
          <image
            class="content-bg"
            src="https://ustatic.hudongmiao.com/%20miao/index/content-bg.png"
          ></image>
          <div class="header">
            <image
              class="left-icon icon"
              src="https://ustatic.hudongmiao.com/%20miao/index/title-icon-left.png"
            ></image>
            <div class="title">恭喜您获得现金奖励</div>
            <image
              class="right-icon icon"
              src="https://ustatic.hudongmiao.com/%20miao/index/title-icon-left.png"
            ></image>
          </div>
          <div class="sub-title">视频已通过审核</div>
          <div class="gain-money">
            {{ Number(remain).toFixed(2) }}<span class="unit-name">元</span>
          </div>
          <div class="tip">注：可于个人中心-我的奖励中查看明细</div>
        </div>
        <image
          class="hb-bottom"
          src="https://ustatic.hudongmiao.com/%20miao/index/hb-bg-bottom.png"
        ></image>
        <image
          class="get-btn"
          src="https://ustatic.hudongmiao.com/%20miao/index/get-bg.png"
          @click="getIncome"
        ></image>
        <image
          class="close-icon"
          src="https://ustatic.hudongmiao.com/%20miao/index/close-icon.png"
          @click="close"
        ></image>
      </div>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
import { receiveMoney } from '@/api/sjsp/video';
import { useUser } from '@/stores/user';

const userStore = useUser();
const { updateAccountRemain } = userStore;

const currentInstance = getCurrentInstance() as any;
const props = defineProps({
  remain: {
    type: String,
    default: '0.00',
  },
});
/** 打开弹窗 */
const open = () => {
  currentInstance?.refs.income.open();
};
/** 关闭弹窗 */
const close = () => {
  currentInstance?.refs.income.close();
};
/** 领取奖励 */
const getIncome = async () => {
  // 调用领取奖励接口
  const res: any = await receiveMoney();
  if (res && String(res.data.msg) === 'ok') {
    uni.showToast({
      icon: 'none',
      title: '领取成功~',
    });
    setTimeout(() => {
      // 更新用户的奖励余额
      updateAccountRemain();
    }, 1500);
  } else {
    uni.showToast({
      icon: 'none',
      title: '领取失败，请稍后重试~'
    });
    return;
  }

  // 关闭
  close();
};

defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.gain-container {
  position: fixed;
  top: 0;
  left: 0;
  .gain-content {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .gain-content-bg {
      width: 100%;
      height: 1100rpx;
      position: absolute;
      .star-light {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .light-bg {
        width: 100%;
        height: 808rpx;
        position: absolute;
        top: 54rpx;
        left: 0;
      }
      .hb-bg {
        width: 577rpx;
        height: 523rpx;
        position: absolute;
        left: 50%;
        bottom: 250rpx;
        transform: translateX(-50%);
      }
      .hb-content {
        width: 523rpx;
        height: 631rpx;
        padding-bottom: 265rpx;
        box-sizing: border-box;
        position: absolute;
        bottom: 250rpx;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .content-bg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }

        .header {
          width: 100%;
          margin-top: 38rpx;
          margin-bottom: 10rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            width: 58rpx;
            height: 17rpx;
          }
          .title {
            margin: 0 10rpx;
            color: #b56628;
            font-size: 35rpx;
            font-weight: bold;
          }
          .right-icon {
            transform: rotate(180deg);
          }
        }
        .sub-title {
          color: #b56628;
          font-size: 27rpx;
        }
        .gain-money {
          margin-top: 19rpx;
          height: 183rpx;
          color: #ff2459;
          font-size: 106rpx;
          font-weight: bold;
          line-height: 183rpx;
          text-align: center;
          .unit-name {
            font-size: 46rpx;
            font-weight: normal;
          }
        }
        .tip {
          margin-top: 13rpx;
          color: rgba(0, 0, 0, 0.4);
          font-size: 23rpx;
        }
      }
      .hb-bottom {
        width: 577rpx;
        height: 265rpx;
        position: absolute;
        bottom: 250rpx;
        left: 50%;
        transform: translateX(-50%);
      }

      .get-btn {
        width: 467rpx;
        height: 106rpx;
        position: absolute;
        bottom: 113rpx;
        left: 50%;
        transform: translateX(-50%);
      }

      .close-icon {
        width: 92rpx;
        height: 92rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
